<template>
    <div class="asideInfo">
        <div class="box">
            <div class="top_nav">
                <div class="equipChoose dropdown" :class="{open: isOpen}">
                    <label for="equipChoose">设备或组:</label>
                    <input type="text" id="equipChoose" placeholder="请选择设备或组" data-toggle="dropdown" readonly aria-haspopup="true"
                           :aria-expanded="isOpen" @click="dropDown" v-model="equipChoose">
                    <div class="dropdown-menu" aria-labelledby="equipChoose">
                        <equip-group @getGroup="groupHide" @getEquip="getEquip"></equip-group>
                    </div>
                    <div class="btnGroup">
                        <button type="button" class="btn btn-success" @click="search">搜索</button>
                        <button type="button" class="btn btn-success export" @click="exportExcel">导出</button>
                    </div>
                </div>
            </div>
            <div class="table">
                <table>
                    <thead>
                    <tr>
                        <th class="order ">序号</th>
                        <th class="myId">设备号(IMEI)</th>
                        <th class="name">设备名称</th>
                        <th class="carphone">车牌号</th>
                        <th class="belongclient">SIM卡号</th>
                        <th class="endtime">最后时间</th>
                        <th class="caveatDetails">总里程(km)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(equip, index) in alarmDetail">
                        <td>{{ index + 1 }}</td>
                        <td>{{ equip.imei }}</td>
                        <td>{{ equip.equipName }}</td>
                        <td>{{ equip.carNumber }}</td>
                        <td>{{ equip.sim }}</td>
                        <td>{{ equip.updateTime }}</td>
                        <td>{{ equip.mileage }}</td>
                    </tr>
                    </tbody>
                </table>
                <div class="text-center customer-table-color">
                    <pagination :total="total" :current-page='current' @pageChange="pageChange"></pagination>
                </div>
            </div>
        </div>
        <!--底部页面显示数据条数-->
        <div class="myButtonMenu">
            <div>
                  <span>
                      每页显示条数
                      <label>
                          <select name="pageSize" v-model="pageSize" @change="pageSizeChange">
                              <option value="10">10</option>
                              <option value="20">20</option>
                              <option value="30">30</option>
                              <option value="40">40</option>
                              <option value="50">50</option>
                              <option value="100">100</option>
                          </select>
                      </label>
                      条
                  </span>
            </div>
        </div>
    </div>
</template>
<script>
    import equipGroup from '@/components/equipOrGroup/equipOrGroup'
    import pagination from '@/components/pagination/pagination'
    import DatePick from '@/base/DatePick' //引入日期选择器组件
    export default {

        data () {
            return {
                isOpen: false,  //是否显示设备或组选择框
                equipChoose: '', //设备或组的值
                total: 0, // 记录总条数
                display: 10, // 每页显示条数
                current: 1, // 当前的页数
                alarmDetail: {}, // 报警记录表格数据
                pageSize: 10,
                dealerId: undefined, // 设备或组选中了客户
                equipName: undefined, // 设备或组选中了设备
                isSearch: false, // 保存是否搜索
            }
        },
        methods: {
            groupHide (data) {
                this.isOpen = false
                this.equipChoose = data.value
                this.dealerId = data.id
                this.equipName = undefined
            },
            getEquip (data) {
                this.equipChoose = data.equipName
                this.dealerId = undefined
                this.equipName = data.equipName
            },
            dropDown () {
                this.isOpen = true
            },
            // 分页组件
            pageChange (currentPage) {
                if (this.isSearch) {
                    this.search()
                } else {
                    this.getTableData(currentPage, this.display)
                }
            },
            pageSizeChange () {
                this.display = this.pageSize * 1
                this.current = 1
                this.pageChange(1)
            },
            // 表格数据
            getTableData (pageNum, pageSize) {
                let params = {
                    pageNum: pageNum,
                    pageSize: pageSize
                }
                this.$ajax
                    .report
                    .alarmRecord(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.alarmDetail = data.result.content
                            this.total = data.result.numberOfElements
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 搜索按钮
            search () {
                if (this.equipChoose === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyEquipOrGroup})
                    return
                }
                let params = {
                    pageNum: 1,
                    pageSize: this.display,
                }
                if (this.dealerId) {
                    params.dealerId = this.dealerId
                } else if (this.equipName) {
                    params.equipName = this.equipName
                }
                this.$ajax
                    .report
                    .queryRecord(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            if (data.result.content === undefined || data.result.content.length === 0) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.queryEmpty})
                                this.equipChoose = ''
                                this.dealerId = undefined
                                this.equipName = undefined
                                this.alarmDetail = {}
                                return
                            }
                            this.isSearch = true
                            this.alarmDetail = data.result.content
                            this.total = data.result.numberOfElements
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            exportExcel () {
                if (this.equipChoose === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyEquipOrGroup})
                    return
                }
                let a = document.createElement('a')
                a.setAttribute('target', '_blank')
                if (this.dealerId) {
                    a.setAttribute('href', 'https://car.so360.org/obd/excel/countMileageSum?dealerId=' + this.dealerId)
                } else if (this.equipName) {
                    a.setAttribute('href', 'https://car.so360.org/obd/excel/countMileageSum?equipName=' + this.equipName)
                }
                a.click()
                a = null
            }
        },
        mounted () {
            this.getTableData(1, this.display)
        },
        components: {
            pagination,
            DatePick,
            equipGroup
        }
    }
</script>
<style scoped>

    * {
        padding: 0;
    }

    input, select {
        background: transparent;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 4px;
        height: 30px;
    }

    .top_nav label {
        font-weight: normal;
        color: #333;
    }

    .top_nav .equipChoose input {
        width: 2.1rem;
        padding-left: 10px;
        margin-right: 10px;
        background: url("../../assets/images/reports_image/mileage_selected-.png") no-repeat 1.85rem;
    }

    .top_nav .equipChoose {
        margin-right: 0.4rem;
        display: inline-block;
    }
    #equipChoose {
        width: 2.1rem;
    }
    .dropdown-menu {
        left: 53px;
        top: 0.3rem;
        width: 5.4rem;
        padding: 10px;
    }

    .asideInfo {
        flex: 1;
    }

    /* 底部显示条数样式 */
    .myButtonMenu {
        position: fixed;
        bottom: 0.5rem;
        margin-left: 0.2rem;
    }

    /* ---------- */
    .box {
        clear: both;
        background: white;
        /* height: 7rem; */
    }

    .top_nav {
        position: relative;
        height: 1rem;
        padding-left: 0.2rem;
        padding-bottom: 0.29rem;
        background: rgb(233, 246, 242);
        padding-top: 0.2rem;
        box-shadow: 0 5px 5px #DCE9E5 inset;

    }

    .top_nav input {
        border: 0.01rem solid rgb(204, 204, 204);
    }

    .btnGroup {
        display: inline-block;
        margin-left: 1rem;
    }

    .btnGroup button {
        padding: 0.09rem 0.45rem;
        outline: none;
        border: 0;
    }

    .btnGroup button.export {
        background: transparent;
        color: rgb(23, 203, 156);;
        border: 1px solid #ccc;
        margin-left: 0.2rem;
    }

</style>
